<template>
  <div class="my-reservation-entry">
    <div class="crumbs-link my-reservation-add-link">
      <em @click="goback()">我的预约</em>
      <strong>
        <i>></i>录入课前资料</strong>
    </div>
    <div class="my-reservation-entry-cont">
      <div class="my-reservation-entry-h">
        <span>公开课名称:</span>
        <span>{{name}}</span>
      </div>
      <template>
        <uploader class="uploader-example" ref="uploader" :options="uploadOptions" :file-status-text="statusText" @file-success="fileSuccess" @file-error="fileFail">
          <uploader-unsupport></uploader-unsupport>
          <uploader-drop>
            <uploader-btn>上传文件</uploader-btn>
            <p>最多可以上传10个文件</p>
          </uploader-drop>
          <uploader-list></uploader-list>
        </uploader>
      </template>
      <ul>
        <li class="entry-file-list clear" v-for="(item, index) in listData" :key="index">
          <img v-if="item.file_type==1" src="../../../../public/images/format/resourceicon1.png" alt="文档" @click="viewResource(item)">
          <img v-else-if="item.file_type==2" src="../../../../public/images/format/resourceicon2.png" alt="日志" @click="viewResource(item)">
          <img v-else-if="item.file_type==3" src="../../../../public/images/format/resourceicon3.png" alt="图片" @click="viewResource(item)">
          <img v-else-if="item.file_type==4" src="../../../../public/images/format/resourceicon4.png" alt="压缩文件" @click="viewResource(item)">
          <img v-else-if="item.file_type==5" src="../../../../public/images/format/resourceicon5.png" alt="音乐" @click="viewResource(item)">
          <img v-else-if="item.file_type==6" src="../../../../public/images/format/resourceicon6.png" alt="视频" @click="viewResource(item)">
          <img v-else-if="item.file_type==7" src="../../../../public/images/format/resourceicon7.png" alt="应用程序" @click="viewResource(item)">
          <img v-else-if="item.file_type==8" src="../../../../public/images/format/resourceicon8.png" alt="其他" @click="viewResource(item)">
          <span class="fileName" :title="item.name+'.'+item.postfix">{{item.name}}.{{item.postfix}}</span>
          <div>
            大小：
            <span v-text="renderSize(item.filesize)"></span>
            <span>上传时间：{{item.create_time}}</span>
          </div>
          <el-button class="fr" type="danger" size="mini" icon="el-icon-delete" @click="delData(item.id,item.schedule_id)"></el-button>
        </li>
      </ul>
      <div class="dependent" v-if="placeholder">
        <i class="ipng image_state01"></i>
        <p>记得及时上传公开课课前资料哦~~</p>
      </div>
    </div>

    <transition name="el-fade-in-linear">
      <div class="masking" :class="{ activeLive: isActive }">
        <div class="maskingBox" v-loading="viewLoading.status" :element-loading-text="viewLoading.txt">
          <div class="masking_h clear">
            <span>视频预览</span>
            <i class="el-icon-close fr" @click="viewClose"></i>
          </div>
          <div class="masking_c">
            <videoAlertView v-if="showVideoPlayer" :playParam.sync="playParam">
            </videoAlertView>
          </div>
        </div>
      </div>
    </transition>
    <transition name="el-fade-in-linear" lock-scroll="false">
      <div class="masking" :class="{ activeLive: isPDFActive }">
        <div class="maskingBox">
          <div class="masking_h clear">
            <span>文档预览</span>
            <i class="el-icon-close fr" @click="viewPDFClose"></i>
          </div>
          <div class="masking_c">
            <div>
              <div class="pdfView">
                <div v-if="viwPdfParam.loadedRatio > 0 && viwPdfParam.loadedRatio < 1" style="background-color: green; color: white; text-align: center" :style="{ width: viwPdfParam.loadedRatio * 100 + '%' }">{{ Math.floor(viwPdfParam.loadedRatio * 100) }}%</div>
                <pdf ref="pdf" :src="viwPdfParam.src" :page="viwPdfParam.page" @progress="viwPdfParam.loadedRatio = $event" @error="error" @num-pages="viwPdfParam.numPages = $event" @link-clicked="viwPdfParam.page = $event">
                </pdf>
              </div>
              <el-pagination @current-change="pdfPageChange" :current-page="viwPdfParam.page" :page-size="1" layout="total,  prev, pager, next, jumper" :total="viwPdfParam.numPages">
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </transition>
    <el-dialog title="图片预览" :visible.sync="imgVisible" width="auto" style="min-width:550px;" top="0" custom-class="imgVisible" :close-on-click-modal="false">
      <div class="imgViewx">
        <img :src="imgViewUrl" alt="">
      </div>
    </el-dialog>
    <el-dialog title="音频预览" :visible.sync="voiceVisible" width="auto" style="min-width:550px;" top="0" custom-class="imgVisible" :close-on-click-modal="false">
      <div class="imgViewx">
        <audio id="voicepoauy" controls="controls" :src="voiceViewUrl" controlsList="nodownload" autoplay>
          Your browser does not support the audio tag.
        </audio>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import pdf from "vue-pdf";
import videoAlertView from "./videoAlertView";
export default {
  data() {
    return {
      placeholder: false,
      schedule_id: this.$route.query.id,
      name: this.$route.query.name,
      listData: [],
      statusText: {
        success: "上传成功",
        error: "上传出错",
        uploading: "正在上传...",
        paused: "暂停",
        waiting: "等待上传"
      },
      // attrs: {
      //         image: ["gif", "jpg", "jpeg", "png", "bmp", "webp"],
      //         video: ["mp4", "m3u8", "rmvb", "avi", "swf", "3gp", "mkv", "flv"],
      //         audio: ["mp3", "wav", "wma", "ogg", "aac", "flac"],
      //         document: [
      //           "doc",
      //           "txt",
      //           "docx",
      //           "pages",
      //           "epub",
      //           "pdf",
      //           "numbers",
      //           "csv",
      //           "xls",
      //           "xlsx",
      //           "keynote",
      //           "ppt",
      //           "pptx"
      //         ]
      //       },
      uploadOptions: {
        target: this.BASE_URL + "/api/resource/res_upload",
        testChunks: false,
        headers: { Authorization: `Bearer ` + this.$g.access_token }
      },
      // 附件预览
      attachmentData: [],
      watchUpload: {
        picture: false,
        relate_res: false
      },

      isActive: true,
      isPDFActive: true,
      viwPdfParam: {
        src: "",
        loadedRatio: 0,
        page: 1,
        numPages: 0,
        rotate: 0
      },
      imgVisible: false,
      imgViewUrl: "",
      voiceVisible: false,
      voiceViewUrl: "",
      viewLoading: {
        status: false,
        txt: "加载数据..."
      },
      showVideoPlayer: false,
      playParam: { play_url: "" },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    goback() {
      this.$router.back(-1);
    },
    // 引入common.js里的公用函数，格式化文件大小
    renderSize(value) {
      return renderSize(value);
    },
    getList() {
      let success = data => {
        this.listData = data.data;
        this.listData.length === 0
          ? (this.placeholder = true)
          : (this.placeholder = false);
      };
      this.$ajax({
        url: "api/teachingschedule/teaching_schedule_resource",
        method: "get",
        params: {
          schedule_id: this.schedule_id
        },
        func: {
          success: success
        }
      });
    },
    //上传成功的事件
    fileSuccess(rootFile, file, message, chunk) {
      var mess = eval("(" + message + ")");
      mess = handleResponseData(mess);
      let success = res => {
        this.$refs.uploader.uploader.removeFile(file); //上传文件列表隐藏
        this.getList();
      };
      var params = {
        schedule_id: this.schedule_id,
        path: mess.data.file_path,
        name: mess.data.file_name,
        postfix: mess.data.post_fix
      };
      this.$ajax.post(
        "api/teachingschedule/teaching_schedule_resource",
        params,
        {
          func: { success: success }
        }
      );
    },
    fileFail(rootFile, file, message, chunk) {
      var mess = eval("(" + message + ")");
      if (parseInt(mess.error) === 401 && this.uploadRetryTimes > 0) {
        let callbcak = data => {
          this.uploadRetryTimes--;
          this.$refs.uploader.uploader.retry(file);
        };
        this.get_access_token(callbcak);
      } else {
        this.$message.error(mess.msg);
      }
    },
    delData(val1, val2) {
      let success = res => {
        this.$message.success(res.msg);
        this.getList();
      };
      this.$ajax({
        url: "api/teachingschedule/teaching_schedule_resource",
        method: "delete",
        params: {
          id: val1,
          schedule_id: val2
        },
        func: {
          success: success
        }
      });
    },

    pdfPageChange(val) {
      this.viwPdfParam.page = val;
    },
    error: function (err) {
      //this.$message.error('读取文件失败');
    },
    //资源预览转发
    viewResource(obj) {
      this.viewLoading.status = true;

      //视频预览
      if (parseInt(obj.file_type) === 6) {
        this.isActive = false;
      } else if (parseInt(obj.file_type) === 3) {
        //图片预览
        this.imgVisible = true;
      } else if (parseInt(obj.file_type) === 1) {
        //文档预览
        this.isPDFActive = false;
      } else if (parseInt(obj.file_type) === 5) {
        //音频预览
        this.voiceVisible = true;
      } else {
        this.$message.warning("不支持预览的资源类型");
        return false;
      }
      let success = data => {
        var result = data.data;
        //视频预览
        if (parseInt(result.file_type) === 6) {
          this.videoView(result.path);
        } else if (parseInt(result.file_type) === 3) {
          //图片预览
          this.imgView(result.path);
        } else if (parseInt(result.file_type) === 1) {
          //文档预览
          this.pdfView(result.path);
        } else if (parseInt(result.file_type) === 5) {
          //音频预览
          this.voiceView(result.path);
          //this.$message.warning("不支持预览的资源类型")
        } else {
          this.$message.warning("不支持预览的资源类型");
        }
      };
      let fail = data => {
        this.viewLoading.status = false;
        this.$message.error(data.msg);
      };
      this.$ajax.get("api/resource/view_info", {
        // is_teaching_resource	string	是	是否是排课评课资源（1：是，0：否）
        params: { id: obj.id, is_teaching_resource: 1 },
        func: { success: success, fail: fail }
      });
    },
    voiceView(url) {
      this.voiceViewUrl = url;
      document.getElementById("voicepoauy").load();
    },
    imgView(url) {
      this.imgViewUrl = url;
    },
    //pdf预览
    pdfView(url) {
      this.viwPdfParam.src = pdf.createLoadingTask(url);
      // console.log(this.viwPdfParam.src);
    },
    viewPDFClose() {
      this.isPDFActive = true;
    },
    //关闭视频预览
    viewClose() {
      this.showVideoPlayer = false;
      this.isActive = true;
    },
    //视频预览
    videoView(url) {
      this.showVideoPlayer = true;
      this.playParam.play_url = url;
    }
  },
  components: {
    pdf,
    videoAlertView
  }
};
</script>
<style lang="scss">
.uploader-example .uploader-btn {
  padding: 8px 16px;
  margin-right: 15px;
  color: #fff;
  background: #338efc;
  border: 1px solid transparent;
}
.uploader-example .uploader-btn:hover {
  background: rgba(51, 142, 252, 0.8);
}
.fileName {
  width: 300px;
}
p {
  display: inline-block;
}

.masking {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: 0.5s;
  background: rgba(0, 0, 0, 0.3);
  z-index: 9999999999;
  .maskingBox {
    position: absolute;
    top: 15%;
    left: 50%;
    width: 800px;
    margin-left: -400px;
    background: #fff;
  }
  .masking_h {
    padding: 10px;
    background: #348efc;
    text-align: center;
    text-align-last: justify;
    > span,
    > i {
      font-size: 16px;
      text-align-last: initial;
      display: inline-block;
      vertical-align: middle;
      color: #fff;
    }
    > i {
      cursor: pointer;
    }
  }
}
.pdfView {
  max-height: 420px;
  overflow: hidden;
  overflow-y: auto;
  z-index: 3;
}
.masking_c {
  height: 450px;
  padding: 10px;
  .el-pagination {
    padding-bottom: 20px;
  }
  .vjs-big-play-button {
    top: 50% !important;
    left: 50% !important;
  }
}
.activeLive {
  opacity: 0;
  visibility: hidden;
}
.imgVisible {
  display: inline-block;
  vertical-align: middle;
  text-align: left;
  min-width: 550px;
  min-height: 550px;
  background-color: #fff;
  margin: 0;
  .el-dialog__header {
    background-color: #348efc;
    padding: 20px;
    span,
    i {
      color: #fff;
    }
    i {
      font-size: 20px;
    }
    i:hover {
      color: #fff;
    }
  }
  .el-dialog__body {
    text-align: center;
    padding: 0;
    img {
      max-width: 100%;
      margin: 0 auto;
    }
  }
}
.el-dialog__wrapper {
  text-align: center;
}
</style>
